<template>
    <div class="container" style="overflow: hidden;">
        <div style="padding-bottom: 10px;border-bottom: 1px solid #ccc;margin-bottom: 15px;">
            <span>地图</span>
            <div style="float: right">实时刷新<el-checkbox v-model="checked" @change="selectRealTime"></el-checkbox></div>
        </div>
        <div style="position: relative;">
            <div id="container"></div>
            <!--<div class="equiment-posi"><span @click="openDialog">设备定位</span></div>-->
        </div>
        <div>
            <el-dialog
                    title="选择设备"
                    :visible.sync="dialogVisible"
                    width="80%">
                <div>
                    <v-gmapchild></v-gmapchild>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                  </span>
            </el-dialog>
        </div>
        <div>
            <el-dialog
                    title="设备"
                    :visible.sync="equimentVisible"
                    width="50%">
                <div>
                    <v-mapchild :parenData1="parentData"></v-mapchild>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="equimentVisible = false">关 闭</el-button>
                    <!--<el-button type="primary" @click="equimentVisible = false">刷 新</el-button>-->
                  </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import vGmapchild from './gisMapChild.vue';
    import vMapchild from './mapEquimentChild.vue';
    import {getListAddedGis,getDeviceDetailInfo} from  '../../../api/index';
    var map = null;
    export default {
        name: "gisMap",
        components:{
            vGmapchild,vMapchild
        },
        data(){
            return {
                dialogVisible:false,
                equimentVisible:false,
                checked:false,
                childData:'',
                parentData:'',
                clickIndex:0,
                addedDataListOrgin:'',
                selectDevice:'',
                selectDevicePid:'',
            }
        },
        computed:{
        },
        created(){
            this.getListAddedGis();
        },
        watch:{
        },
        mounted(){
            this.initMap();
        },
        methods:{
            getDeviceDetailInfo(){
                getDeviceDetailInfo({
                    id:this.selectDevice,
                    pid:this.selectDevicePid,
                }).then((res)=>{
                    console.log(res)
                    this.parentData = res;
                    this.parentData['basicInfo']['deviceId'] = this.selectDevice;
                })
            },
            //获取已添加的标注点的数据列表
            getListAddedGis(){
                getListAddedGis({
                    gisType:'1'
                }).then((res) =>{
                    this.addedDataListOrgin = res.d;
                    this.initMapPoint();
                })
            },
            setCenterMap(){
                this.dialogVisible = false;
                var $_this = this;
                var point = new BMap.Point(121.22732,31.029372);
                map.centerAndZoom(point,17);
                setTimeout(function () {
                    $_this.equimentVisible = true;
                },500)

            },
            initMap(){
                var _this = this;
                map = new BMap.Map("container");
                map.centerAndZoom(new BMap.Point(121.22732,31.029372), 17);

                var mapType1 = new BMap.MapTypeControl(
                    {
                        mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
                        anchor: BMAP_ANCHOR_TOP_LEFT
                    }
                );

                var overView = new BMap.OverviewMapControl();
                var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
                var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL});
                //添加地图类型和缩略图
                map.addControl(mapType1);//2D图，混合图
                map.addControl(overView); //添加默认缩略地图控件
                map.addControl(overViewOpen); //右下角，打开
                map.addControl(top_right_navigation);//右上角，仅包含平移和缩放按钮

                map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
                var  mapStyle ={
                    //features: ["road", "building","water","land"],//隐藏地图上的poi
                    style : "dark"  //设置地图风格为高端黑
                }
                map.setMapStyle(mapStyle);
            },
            //初始化地图上的标注点
            initMapPoint(){
                var pointArray = this.addedDataListOrgin;
                for (var i = 0; i < pointArray.length; i++) {
                    if(pointArray[i].longitude && pointArray[i].latitude){
                        this.selectDevice = pointArray[i].id;
                        this.selectDevicePid = pointArray[i].pid;
                        this.selectDeviceName =pointArray[i].elementName;
                        this.selectDeviceImg = pointArray[i].imageUrl;
                        this.mapLng = pointArray[i].longitude;
                        this.mapLat =  pointArray[i].latitude;
                        this.addPoint();
                    }
                }
                //让所有点在视野范围内
                // map.setViewport(pointArray);
            },
            //添加标注点
            addPoint(){
                // map.clearOverlays();

                var points = new BMap.Point(this.mapLng, this.mapLat);
                var labels = new BMap.Label("<span title='"+this.selectDevice+"#' img='"+this.selectDeviceImg+"@' pid='"+this.selectDevicePid+"%'></span>"+this.selectDeviceName,{offset:new BMap.Size(16,30)});
                var myIcons = new BMap.Icon(require('../../../assets/img/DeviceImages/'+this.selectDeviceImg), new BMap.Size(32,48));
                var markers = new BMap.Marker(points,{icon:myIcons});
                map.addOverlay(markers);
                markers.setLabel(labels);
                markers.addEventListener("click",this.pointClick);

            },
            //标注点点击事件
            pointClick(e){
                var p = e.target;
                var dCode = p.getLabel().content.substring(p.getLabel().content.indexOf('=')+2,p.getLabel().content.indexOf('#'));
                var dCodeName = p.getLabel().content.substring(p.getLabel().content.indexOf('</span>')+7,p.getLabel().content.length);
                var dCodeImg = p.getLabel().content.substring(p.getLabel().content.indexOf('img')+5,p.getLabel().content.indexOf('@'));
                var dCodePid = p.getLabel().content.substring(p.getLabel().content.indexOf('pid')+5,p.getLabel().content.indexOf('%'));
                this.selectDevice = dCode;
                // this.selectDeviceName = dCodeName;
                // this.selectDeviceImg = dCodeImg;
                this.selectDevicePid = dCodePid;

                if(this.selectDevicePid == 1){
                    return ;
                }
                this.getDeviceDetailInfo();
                this.equimentVisible = true;
            },
            openDialog(){
                this.dialogVisible = true
            },
            selectRealTime(val){
                console.log(val);
                if(val){
                    // this.webstockFn();
                }
            },
        }
    }
</script>

<style scoped>
  #container {width: 100%;height: 690px;overflow: hidden;margin:0;font-family:"微软雅黑";}
    .equiment-posi{
        position: absolute;
        top: 40px;
        left: 10px;
    }
    .equiment-posi span{
        font-size: 14px;
        padding: 5px;
        background: #fff;
    }

</style>